<template>
    <el-row>
        <el-col :span="12" class="el-col-left">
            <div class="left-logo">
                <img src="../assets/logo.svg">后台管理系统
            </div>
            <div class="left-center">
                <div class="left-welcome">
                    <img src="../assets/login-img.svg" width="400" />
                    <h1>欢迎使用后台管理系统</h1>
                    <h3>边学边用</h3>
                </div>
            </div>
        </el-col>
        <el-col :span="12" class="el-col-right">
            <div class="right-center">
                <div class="right-login-form">
                    <h1>登录</h1>
                    <el-form :rules="rules" label-position="top" label-width="100px" style="width: 400px"
                        :model="loginForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input size="large" v-model="loginForm.username" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input size="large" v-model="loginForm.password" />
                        </el-form-item>
                        <el-form-item>
                            <div style="width: 100%;display: flex;justify-content: space-between;">
                                <el-checkbox v-model="checked2" label="记住我" size="large" />
                                <el-link type="primary" :underline="false">忘记密码?</el-link>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="large" style="width: 400px;" type="primary">登录</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="large" style="width: 400px;">注册</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-divider>其他登录方式</el-divider>
                        </el-form-item>
                        <el-form-item>
                            <div style="width: 100%;display: flex;justify-content: space-between;">
                                <img width="30" src="@/assets/qq.svg" />
                                <img width="30" src="@/assets/wechat.svg" />
                                <img width="30" src="@/assets/weibo.svg" />
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import { ref, reactive } from 'vue'

//登录表单数据
let loginForm = ref({
    username: "",
    password: ""
})
//记住我
let checked2 = ref(false)
//表单校验规则
const rules = reactive({
    username: [
        { required: true, message: "请输入用户名", trigger: 'blur' }
    ],
    password:[
        {required:true,message:"请输入密码",trigger:'blur'},
        {min:6,message:"密码长度至少为6位",trigger:'change'}
    ]
})

</script>

<style lang="scss" scoped>
.el-row {
    height: 100vh;

    //左侧
    .el-col-left {
        background-color: #373e51;

        .left-logo {
            margin: 30px;
            color: #ffffff;
            font-size: 20px;
            line-height: 20px;
            text-align: left;

            img {
                width: 60px;
                vertical-align: middle;
                margin-right: 10px;
            }
        }

        .left-center {
            width: 400px;
            height: calc(100vh - 200px);
            display: flex;
            margin: 0 auto;
            align-items: center;

            .left-welcome {
                text-align: left;

                h1,
                h3 {
                    color: #ffffff;
                }

                h3 {
                    margin-top: 20px;
                }
            }
        }
    }

    //右侧
    .el-col-right {
        background-color: #ffffff;

        .right-center {
            width: 400px;
            height: 100vh;
            display: flex;
            margin: 0 auto;
            align-items: center;

            .right-login-form {
                text-align: center;
            }
        }
    }
}
</style>